<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/base.css" />
		<script src="../js/utils.js"></script>
		<style>
			.user-info {
				position: absolute;
				bottom: 0px;
				top: 0px;
				left: 0px;
				right: 0px;
				width: 100%;
			}
			
			.user-info .small-img {
				width: 30px;
			}
			
			.user-info .white-bg-container {
				width: 100%;
				position: absolute;
				height: 80px;
			}
			
			.user-info .white-bg-container .bg {
				height: 60%;
				width: 100%;
				background: rgba(255, 255, 255, 0.5);
			}
			
			.head-img {
				width: 80px;
			}
			.head-container{
				width: 80px;
				height: 80px;
				overflow: hidden;
				border-radius: 50%;			
			}
			
			.mui-table-view::before {
				background: none;
			}
			
			.mui-table-view::after {
				background: none;
			}
			
			.mui-table-view-li {
				padding-top: 5px;
				padding-bottom: 5px;
			}
			
			.mar-top {
				margin-top: 10px;
			}
			
			.mar-top-1 {
				margin-top: 2px;
			}
			
			.heights {
				height: 50px;
			}
			
			.height-70 {
				height: 70%;
			}
			.div1{
				background: white;
				padding-left:20px;
				padding-top:10px;
				padding-bottom: 15px;
			}
			.button1{
				border-radius: 8px;
				padding: 5px;
				width: 90px;
				border: none;
				font-size: 20px;
				background-color: #00d5c5;
				color: #FFFFFF;				
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div style="position: relative;">
				<img id="img1" src="../img/my-bg-2.png" class="fill-w" />
				<div class="user-info flex v-flex">
					<div class="flex-2"></div>
					<div class="flex-2" style="position: relative;">
						<div class="white-bg-container flex v-center">
							<div class="bg"></div>
						</div>
						<div style="position: absolute;width: 100%;">

							<div class="flex v-center">
								<div class="flex-1">
									<div class=" flex h-center v-center" onclick="onMyYue()">
										<img src="../img/money.png" class="small-img" />
										<span>余额</span>
									</div>
									<div class="flex h-center v-center">
										1000.00
									</div>
								</div>

								<div onclick="onHead()" class="head-container">
									<!--<img id="img_head" src="../img/head-01.png" class="head-img" />-->
									<img id="img_head" src="../img/bg-01.png" class="fill-h fill-w" />
								</div>

								<div class="flex-1">
									<div class=" flex h-center v-center" onclick="onShoppingMall()">
										<img src="../img/jf.png" class="small-img" />
										<span>积分</span>
									</div>
									<div class="flex h-center v-center">
										1000.00
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="flex-1 flex v-center" style="margin-top: 35px;">
						<div class="flex-2" style="text-align: center;">
							<button id="name_cancle" onclick="onCancle()" style="border: none;font-size: 1.4rem;background-color: #3E9BE1;color: #FFFFFF;display: none;">取消</button>
						</div>
						<div class="flex-3" style="text-align: center;height: 30px;">
							<span id="name_span">你好啊你好你好啊</span> 
							<input id="name_input" style="height: 20px;width: 100%;text-align: center;display: none;" type="text"/>
						</div>
						<div class="flex-2" style="height: 30px;text-align: center;">

							<button id="name_compile" onclick="onCompile()" class="mui-icon mui-icon-compose" style="background: none;border: none;font-size: 1.4rem;">编辑</button>
							
							
							<button id="name_submit" onclick="onSubmit()" style="border: none;font-size: 1.4rem;background-color: red;color: #FFFFFF;display: none;">确定</button>
							
							
						</div>
					</div>

				</div>
			</div>

			<div id="data-teacher" class="div1">											
					<div>
						<span>手&nbsp;机&nbsp;号：</span>
						<span>19337149202</span>
					</div>
					<div>
						<span>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</span>
						<span>老师</span>
					</div>
					<div>
						<span>邀&nbsp;请&nbsp;码：</span>
						<span>123456</span>
					</div>												
			</div>
			<div id="data-student" class="div1 flex">
				<div class="flex-2">
					<div>
						<span>手&nbsp;机&nbsp;号：</span>
						<span>19337149202</span>
					</div>
					<div>
						<span>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</span>
						<span>学生</span>
					</div>
					<div>
						<span>已&nbsp;绑&nbsp;定：</span>
						<span>石云鹤</span>
					</div>
				</div>
				<div class="flex-1" style="text-align: center;">
					<button id="bingdTeacher" class="button1">绑定</button>
				</div>	
					
			</div>	

			<ul class="mui-table-view" onclick="onMyStudent()">
				<li class="mui-table-view-cell mui-table-view-li">
					<a class="mui-navigate-right">
						<div class="flex v-center heights">
							<img src="../img/stu.png" class="height-70" />
							<span>我的学生</span>
						</div>
					</a>
				</li>

			</ul>
			<ul class="mui-table-view mar-top-1" onclick="onMyPresent()">
				<li class="mui-table-view-cell mui-table-view-li">
					<a class="mui-navigate-right">
						<div class="flex v-center heights">
							<img src="../img/gift.png" class="height-70" />
							<span>我的礼品</span>
						</div>
					</a>
				</li>

			</ul>
			<ul class="mui-table-view mar-top" onclick="onStatistics()">
				<li class="mui-table-view-cell mui-table-view-li">
					<a class="mui-navigate-right">
						<div class="flex v-center heights">
							<img src="../img/counts.png" class="height-70" />
							<span>用户统计</span>
						</div>
					</a>
				</li>

			</ul>
			<ul class="mui-table-view mar-top-1" onclick="onUnbundle()">
				<li class="mui-table-view-cell mui-table-view-li">
					<a class="mui-navigate-right">
						<div class="flex v-center heights">
							<img src="../img/unbind.png" class="height-70" />
							<span>解绑</span>
						</div>
					</a>
				</li>

			</ul>
			<ul class="mui-table-view mar-top-1" onclick="onMyFeedback()">
				<li class="mui-table-view-cell mui-table-view-li">
					<a class="mui-navigate-right">
						<div class="flex v-center heights">
							<img src="../img/feedback.png" class="height-70" />
							<span>用户反馈</span>
						</div>
					</a>
				</li>

			</ul>
		</div>
		
		<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(1)" href="#" >相册</a>
		      </li>
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(2)" href="#" >相机</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(0)" href="#sheet1" ><b>取消</b></a>
		      </li>
		    </ul>
		</div>
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
	
		<script>
			mui.init();
			//余额
			function onMyYue(){
				mui.openWindow({
					url: "my-yue.html"
			    });
			}
			
			//我的学生,只有老师有这个栏目
			function onMyStudent(){
				mui.openWindow({
					url: "my-student.html"
			    });
			}
			
			//积分
			function onShoppingMall(){
				mui.openWindow({
					url: "my-shoppingmall.html"
			    });
			}
			//我的礼品
			function onMyPresent(){
				if(false){    //如果是学生跳进学生页面
					mui.openWindow({
					   url: "my-present-student.html"
			        });
				}else if(true){   //跳进老师页面
					mui.openWindow({
					   url: "my-present-teacher.html"
			        });
				}
			}
			//统计
			function onStatistics(){
				mui.openWindow({
					url: "my-statistics.html"
			    });
			}
			
			//用户反馈
			function onMyFeedback(){
				mui.openWindow({
					url: "my-feedback.html"
			    });
			}
			
			//编辑昵称
			function onCompile(){
				printLog("编辑了");
				document.getElementById("name_span").style.display = "none";
				document.getElementById("name_compile").style.display = "none";
				
				document.getElementById("name_input").style.display = "inline";
				document.getElementById("name_cancle").style.display = "inline";
				document.getElementById("name_submit").style.display = "inline";
			}
			//提交修改后的名字
			function onSubmit(){
				var text = document.getElementById("name_input").value;
				if( isEmpty(text)){
					mui.toast("不能为空");
					return false;
				}
				
				
			}
			//取消修改
			function onCancle(){
				document.getElementById("name_span").style.display = "inline";
				document.getElementById("name_compile").style.display = "inline";
				
				document.getElementById("name_input").style.display = "none";
				document.getElementById("name_cancle").style.display = "none";
				document.getElementById("name_submit").style.display = "none";
			}
			//修改头像
			function onHead(){
				mui('#sheet').popover("show");
			}
			
			function cancle(num){
				mui('#sheet').popover("hide");
				if(num!=0){
					
					//判断是相册还是相机
					if(num==1){  //选第一个   相册
						galleryImgsMaximum();
					}else{    //选第二个     相机
						
						getImage();
					}
				}
				
			}
			
			// 拍照
			function getImage(){
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p){
					plus.io.resolveLocalFileSystemURL(p, function(entry){
						printLog(entry.toLocalURL());  //图片路径
					    goHead(entry.toLocalURL());
					}, function(e){
						mui.alert('读取拍照文件错误：'+e.message);
					});
				}, function(e){
					mui.alert('失败：'+e.message);
				}, {filename:'_doc/camera/',index:1});
			}
			//选择照片
			function galleryImgsMaximum(){
				// 从相册中选择图片
				printLog('从相册中选择多张图片(限定最多选择3张)：');
			    plus.gallery.pick(function(e){
			    	printLog(e.files[0]);  //图片路径
			    	goHead(e.files[0]);			    	
			    }, function(e){
			    	printLog('取消选择图片');
			    	                            //maximum可以修改选择数量
			    },{filter:'image',multiple:true,maximum:1,system:false,onmaxed:function(){
					plus.nativeUI.alert('最多只能选择1张图片');
			    }});// 最多选择3张图片
			}
			
			function goHead(src){
				if( !isEmpty(src)){
					mui.openWindow({
						url: "my-cropperPic.html",
						id:'my-cropperPic.html',  
					    extras:{  
					        imgSrc:src				        
					    }  
			        });
				}				
			}
			
			//添加更换头像自定义事件监听
			window.addEventListener('head',function(event){
			  //获得事件参数
			  var headSrc = event.detail.src;
			  
			  document.getElementById('img_head').setAttribute('src',headSrc);
			
			});
			//学生才有的绑定按钮,绑定老师之后这个按钮是隐藏的
			document.getElementById("bingdTeacher").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				mui.prompt('请输入邀请码绑定老师 :', '请输入', btnArray, function(e) {
					if (e.index == 1) {  //确定
						if(isEmpty(e.value)){
							mui.toast("不能为空");
							return false;
						}
						
						printLog(e.value);
					} else {
						
					}
				})
			});
			//解绑,解绑分两种,一种是学生解绑,一种是老师解绑,学生解绑弹出个对话框,老师解绑要跳页面
			function onUnbundle(){
				
				if(false){   //学生
					var btnArray = ['否', '是'];
					mui.confirm('解绑后相对积分也会清除，请仔细操作', btnArray, function(e) {
						if (e.index == 1) {  //确定
							mui.toast("确定解绑");
						} else {
							
						}
					})
				}else if(true){   //老师解绑
					mui.openWindow({
						url: "my-student.html",
						
			        });
				}
				
				
			}
			
		</script>

	</body>

</html>